{% extends 'admin/index.html' %}
{% load humanize %}

{% block content_title %}{% endblock %}
{% block coltype %}bp content-wrapper{% endblock %}

{% block nav-sidebar %}
	{% include "admin/nav_sidebar.html" %}
{% endblock %}

{% block sidebar %}
{% endblock %}

{% block content %}
<script async>
	// Global Variables
	var DASHBOARD = {
		clicks_over_time: {
			dates: [{% for date, _ in clicks_over_time %}"{{ date }}",{% endfor %}],
			clicks: [{% for _, click in clicks_over_time %}{{ click }},{% endfor %}]
		},
		top_locations: [
			{% for country, clicks in top_all_countries %}['{{ country.name }}', {{ clicks }}],{% endfor %}
		],
		top_devices: [
			{% for device, clicks in top_devices %}['{{ device }}', {{ clicks }}],{% endfor %}
		],
		top_browsers: [
			{% for browser, clicks in top_browsers %}['{{ browser }}', {{ clicks }}],{% endfor %}
		],
		top_os: [
			{% for os, clicks in top_os %}['{{ os }}', {{ clicks }}],{% endfor %}
		],
	}
</script>

<div class="mt-4">
	<div class="row">
		<div class="col-md-3">
			<div class="info-box">
				<span class="info-box-icon bg-success text-white elevation-1"><i class="fas fa-arrow-pointer"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">Total Clicks</span>
					<span class="info-box-number">
					{{ total_clicks|intcomma }}
					</span>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="info-box">
				<span class="info-box-icon bg-danger text-white elevation-1"><i class="fas fa-link"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">Total Links</span>
					<span class="info-box-number">
					{{ total_links|intcomma }}
					</span>
				</div>
			</div>
		</div>
		{% if user.is_superuser %}
		<div class="col-md-3">
			<div class="info-box">
				<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">Total Users</span>
					<span class="info-box-number">
					{{ total_users|intcomma }}
					</span>
				</div>
			</div>
		</div>
		{% endif %}
		<div class="col-md-3">
			<div class="info-box">
				<span class="info-box-icon bg-info text-white elevation-1"><i class="fas fa-cog"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">Total Domains</span>
					<span class="info-box-number">
					{{ total_domains|intcomma }}
					</span>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-area-chart"></i> Clicks Over Time</h3>
                </div> <!-- /.box-header -->
                <div class="card-body graph-section">
                    <canvas id="clicks-over-time"></canvas>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-5">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-flag"></i> Top Countries</h3>
                </div> <!-- /.box-header -->
                <div class="card-body p-0">
                	<table class="table m-0">
                		<thead>
                			<tr>
                				<th>Flag</th>
                				<th>Country</th>
                				<th>Clicks</th>
                			</tr>
                		</thead>
                		<tbody>
                			{% for country, clicks, percent in top_countries %}
                			<tr>
                				<td><img src="{{ country.flag }}" title="{{ country.name }}"></td>
                				<td>{% if country.name %}{{ country.name }}{% else %}Unknown{% endif %}</td>
                				<td>{{ clicks }} ({{ percent }}%)</td>
                			</tr>
                			{% empty %}
								<tr><td colspan="3" align="center">No data</td></tr>
							{% endfor %}
                		</tbody>
                	</table>
                </div>
            </div>
		</div>
		<div class="col-md-7">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fas fa-map"></i> Top Locations</h3>
                </div> <!-- /.box-header -->
                <div class="card-body graph-section">
                	<div id="top-locations"></div>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-arrow-up-right-from-square"></i> Referrers</h3>
                </div> <!-- /.box-header -->
                <div class="card-body p-0">
                	<table class="table m-0">
                		<thead>
                			<tr>
                				<th>Referrer</th>
                				<th>Clicks</th>
                			</tr>
                		</thead>
                		<tbody>
                			{% for referer, clicks in referers %}
	                			<tr>
	                				<td>
	                					{% if referer %}
	                						<a href="{{ referer }}" title="{{ referer }}" target="_blank">
	                							{{ referer|truncatechars:80 }}
	                						</a>
	                					{% else %}
	                						<b>Direct, Email, SMS</b>
	                					{% endif %}
	                				</td>
	                				<td>{{ clicks }}</td>
	                			</tr>
                			{% empty %}
								<tr><td colspan="2" align="center">No data</td></tr>
							{% endfor %}
                		</tbody>
                	</table>
                </div>
            </div>
		</div>
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-desktop"></i> Top Devices</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-devices"></div>
                </div>
            </div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-pie-chart"></i> Top Operating Systems</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-os" style="min-height: 250px;"></div>
                </div>
            </div>
		</div>

		<div class="col-md-6">
			<div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title"><i class="fa fa-pie-chart"></i> Top browsers</h3>
                </div> <!-- /.box-header -->
                <div class="card-body">
                	<div id="top-browsers" style="min-height: 250px;"></div>
                </div>
            </div>
		</div>
	</div>

	{% if user.is_superuser %}
		<div class="row">
			<div class="col-md-12">
				<div class="card card-primary">
					<div class="card-header border-transparent">
						<h3 class="card-title"><i class="fas fa-link"></i> Recent Links</h3>
					</div>

					<div class="card-body p-0">
						<div class="table-responsive">
							<table class="table m-0">
								<thead>
									<tr>
										<th>#ID</th>
										<th>Title</th>
										<th>links</th>
										<th>Clicks</th>
										<th>Status</th>
										<th>Created at</th>
										<th>Actions</th>
									</tr>
								</thead>
								<tbody>
									{% for link in recent_links %}
									<tr>
										<td>{{ link.id }}</td>
										<td>
											<a href="{% url 'admin:links_manager_link_stats' link.id %}">
												{{ link.title }}
											</a>
										</td>
										<td>
											{{ link.show_urls }}
										</td>
										<td>{{ link.clicks }}</td>
										<td>{{ link.get_status }}</td>
										<td>{{ link.created }}</td>
										<td>{{ link.show_actions }}</td>
									</tr>
									{% empty %}
										<tr><td colspan="7" align="center">No data</td></tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</div> <!-- / card div -->
			</div>
			<div class="col-md-12">
				<div class="card card-primary">
					<div class="card-header border-transparent">
						<h3 class="card-title"><i class="fas fa-user-group"></i> Recent Registered Users</h3>
					</div>

					<div class="card-body p-0">
						<div class="table-responsive">
							<table class="table m-0">
								<thead>
									<tr>
										<th>#ID</th>
										<th>Avatar</th>
										<th>Info</th>
										<th>Links</th>
										<th>Clicks</th>
										<th>Joined at</th>
									</tr>
								</thead>
								<tbody>
									{% for user in recent_users %}
									<tr>
										<td>{{ user.id }}</td>
										<td>
											<a href="{% url 'admin:accounts_customuser_change' user.id %}">
												{{ user.avatar_image }}
											</a>
										</td>
										<td>
											<a href="{% url 'admin:accounts_customuser_change' user.id %}">
												{{ user.username }}<br>
												{{ user.email }}
											</a>
										</td>
										<td>{{ user.total_links }}</td>
										<td>{{ user.total_clicks }}</td>
										<td>{{ user.date_joined }}</td>
									</tr>
									{% empty %}
										<tr><td colspan="6" align="center">No data</td></tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</div> <!-- / card div -->
			</div>
		</div>
	{% endif %}
</div>

{% endblock %}